From c0e4dc886eaba03485ea4aaac37eaffb311aeb74 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 2 Jan 2024 21:47:28 -0800
Subject: feat(badges): categories

---
 src/routes/user/[user]/badges/+page.svelte | 102 +++++++++++++++++++++--------
 1 file changed, 74 insertions(+), 28 deletions(-)

(limited to 'src/routes/user/[user]')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 20d4775a..69965e83 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -21,6 +21,8 @@
 	let confirmDelete = 0;
 	let selectedBadge: Badge | undefined = undefined;
 
+	type GroupedBadges = { [key: string]: Badge[] };
+
 	onMount(async () => {
 		// socket.on('badges', (message) => (badges = message));
 
@@ -45,6 +47,7 @@
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
 		const time = document.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+		const category = document.querySelector('input[name="category"]') as HTMLInputElement;
 
 		if (!imageURL.value) {
 			error = 'Image URL cannot be empty.';
@@ -66,7 +69,7 @@
 				activityURL.value || '#'
 			)}${
 				description.value.length > 0 ? `&description=${encodeURIComponent(description.value)}` : ''
-			}${
+			}${category.value.length > 0 ? `&category=${encodeURIComponent(category.value)}` : ''}${
 				time.valueAsDate ? `&time=${encodeURIComponent(dateToDatabaseTime(time.valueAsDate))}` : ''
 			}${
 				selectedBadge && selectedBadge.id ? `&update=${encodeURIComponent(selectedBadge.id)}` : ''
@@ -163,6 +166,26 @@
 			element.classList.remove('invert');
 		}
 	};
+
+	const groupBadges = (badges: Badge[]) => {
+		const groupedBadges: GroupedBadges = {};
+
+		badges.forEach((badge) => {
+			if (!badge.category) badge.category = 'Uncategorized';
+
+			if (!groupedBadges[badge.category]) groupedBadges[badge.category] = [];
+
+			groupedBadges[badge.category].push(badge);
+		});
+
+		return Object.entries(groupedBadges)
+			.sort((a, b) => b[1].length - a[1].length)
+			.reduce((set: GroupedBadges, [key, value]) => {
+				set[key] = value;
+
+				return set;
+			}, {});
+	};
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -227,6 +250,15 @@
 				size="11"
 				value={selectedBadge ? selectedBadge.description : ''}
 			/>
+			<input
+				type="text"
+				placeholder="Category (Optional)"
+				name="category"
+				minlength="1"
+				maxlength="1000"
+				size="11"
+				value={selectedBadge ? selectedBadge.category : ''}
+			/>
 			<a href={`#`} on:click={submitBadge}>{selectedBadge ? 'Update' : 'Add'} Badge</a>
 			{#if selectedBadge}
 				or
@@ -253,36 +285,50 @@
 		{#if badgesResponse}
 			{#await badgesResponse.json()}
 				Loading badges ... 80%
-			{:then badges}
+			{:then ungroupedBadges}
 				<div id="badges">
-					{#if badges === null}
+					{#if ungroupedBadges === null}
 						{@html nbsp('Loading badges ... 50%')}
-					{:else if badges.length === 0}
+					{:else if ungroupedBadges.length === 0}
 						{@html nbsp('No badges found for this user.')}
 					{:else}
-						{#each badges as badge}
-							{#if editMode}
-								<a
-									href={`#`}
-									on:click={() => (selectedBadge = badge)}
-									id={`badge-${badge.id}`}
-									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
-										badge.description ? `\n${badge.description}` : ''
-									}`}
-								>
-									<img src={badge.image} alt={badge.description} />
-								</a>
-							{:else}
-								<a
-									href={badge.post}
-									target="_blank"
-									id={`badge-${badge.id}`}
-									title={`${databaseTimeToDate(badge.time).toLocaleString()}${
-										badge.description ? `\n${badge.description}` : ''
-									}`}
-								>
-									<img src={badge.image} alt={badge.description} />
-								</a>
+						{@const groupedBadges = Object.entries(groupBadges(ungroupedBadges))}
+
+						{#each groupedBadges as [category, badges]}
+							<details open>
+								<summary>{category}</summary>
+
+								<div class="badges">
+									{#each badges as badge}
+										{#if editMode}
+											<a
+												href={`#`}
+												on:click={() => (selectedBadge = badge)}
+												id={`badge-${badge.id}`}
+												title={`${
+													badge.time ? databaseTimeToDate(badge.time).toLocaleString() : ''
+												}${badge.description ? `\n${badge.description}` : ''}`}
+											>
+												<img src={badge.image} alt={badge.description} />
+											</a>
+										{:else}
+											<a
+												href={badge.post}
+												target="_blank"
+												id={`badge-${badge.id}`}
+												title={`${
+													badge.time ? databaseTimeToDate(badge.time).toLocaleString() : ''
+												}${badge.description ? `\n${badge.description}` : ''}`}
+											>
+												<img src={badge.image} alt={badge.description} />
+											</a>
+										{/if}
+									{/each}
+								</div>
+							</details>
+
+							{#if groupedBadges[groupedBadges.length - 1][0] !== category}
+								<p />
 							{/if}
 						{/each}
 					{/if}
@@ -311,7 +357,7 @@
 		height: auto;
 	}
 
-	#badges {
+	.badges {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
 		grid-gap: 0.25%;
-- 
cgit v1.2.3